<template>
  <a-card>
    <template #title>
      <div class="section-title">
        <span>分案阶段</span>
        <a-tag color="processing">进行中</a-tag>
      </div>
    </template>

    <!-- 委案客户列表 -->
    <div class="entrusted-customer-list" style="margin-bottom: 24px;">
      <h4>委案客户列表</h4>
      <div class="table-actions" style="margin-bottom: 16px;">
        <a-checkbox v-model:checked="allCustomersSelected" @change="handleSelectAll">
          全选
        </a-checkbox>
        <span style="margin-left: 16px; color: #666;">
          已选择 {{ selectedAssignmentCustomerIds.length }} 个客户
        </span>
      </div>
      <a-table 
        :columns="assignmentCustomerTableColumns" 
        :dataSource="entrustedCustomerList" 
        :pagination="false"
        :scroll="{ y: 400 }"
        size="small"
        bordered
        :row-selection="{
          selectedRowKeys: selectedAssignmentCustomerIds,
          onChange: handleAssignmentCustomerSelection,
          type: 'checkbox'
        }"
      />
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons" style="text-align: center;">
      <a-button type="primary" @click="showLoginModal" style="margin-right: 8px;">
        切换用户
      </a-button>
      <a-button type="primary" @click="handleAssignment">
        分案
      </a-button>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { computed, defineProps, defineEmits } from 'vue';

// 定义属性
const props = defineProps<{
  entrustedCustomerList: any[];
  selectedAssignmentCustomerIds: string[];
}>();

// 定义事件
const emit = defineEmits([
  'show-login-modal',
  'select-all-assignment-customers',
  'select-assignment-customers',
  'handle-assignment'
]);

// 分案客户表格列配置
const assignmentCustomerTableColumns = [
  {
    title: '客户ID',
    dataIndex: 'customerId',
    key: 'customerId',
    width: 120,
    ellipsis: true
  },
  {
    title: '客户姓名',
    dataIndex: 'customerName',
    key: 'customerName',
    width: 120,
    ellipsis: true
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    width: 120,
    ellipsis: true
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
    key: 'idCard',
    width: 150,
    ellipsis: true
  },
  {
    title: '贷款金额',
    dataIndex: 'loanAmount',
    key: 'loanAmount',
    width: 100,
    ellipsis: true
  },
  {
    title: '逾期天数',
    dataIndex: 'overdueDays',
    key: 'overdueDays',
    width: 100,
    ellipsis: true
  },
  {
    title: '委案状态',
    dataIndex: 'entrustStatus',
    key: 'entrustStatus',
    width: 100,
    ellipsis: true
  },
  {
    title: '委案时间',
    dataIndex: 'entrustTime',
    key: 'entrustTime',
    width: 150,
    ellipsis: true
  }
];

// 全选状态
const allCustomersSelected = computed({
  get: () => props.entrustedCustomerList.length > 0 && props.selectedAssignmentCustomerIds.length === props.entrustedCustomerList.length,
  set: (value: boolean) => {
    if (value) {
      const allIds = props.entrustedCustomerList.map(customer => customer.customerId);
      emit('select-assignment-customers', allIds);
    } else {
      emit('select-assignment-customers', []);
    }
  }
});

// 处理全选
const handleSelectAll = (e: any) => {
  emit('select-all-assignment-customers', e.target.checked);
};

// 处理分案客户选择
const handleAssignmentCustomerSelection = (selectedRowKeys: string[]) => {
  emit('select-assignment-customers', selectedRowKeys);
};

// 显示登录弹框
const showLoginModal = () => {
  emit('show-login-modal');
};

// 处理分案
const handleAssignment = () => {
  emit('handle-assignment');
};
</script>

<style scoped>
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entrusted-customer-list h4 {
  margin-bottom: 16px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 500;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
